<template>
	<view class="options">
		<div class="item">
			<image class="img" src="/static/img/view/sharewechat.svg" mode="widthFix"></image>
		</div>
		<div class="item">
			<image class="img" src="/static/img/view/chembirek.svg" mode="widthFix"></image>
		</div>
		<div class="item">
			<image class="img" v-if="!info.like" src="/static/img/view/collection.svg" mode="widthFix"></image>
			<image class="img" v-if="info.like" src="/static/img/view/ok-collection.svg" mode="widthFix"></image>
		</div>
		<div class="item">
			<image class="img" v-if="!info.subscribe" src="/static/img/icon/subscribe.svg" mode="widthFix"></image>
			<image class="img" v-if="info.subscribe" src="/static/img/icon/subscribe-ok.svg" mode="widthFix">
			</image>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				require: true,
			},
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.options {
		display: flex;
		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25%;
			height: 48px;
			border-bottom: 1px solid #eee;
			border-right: 1px solid #eee;

			&:last-of-type {
				border-right-color: transparent;
			}

			.img {
				width: 20px;
				display: block;
			}
		}
	}
</style>